<style rel="stylesheet/scss" lang="scss" scoped>
  .mid {
    line-height: 140px;
  }
</style>
<template>
  <div class="app-container calendar-list-container" v-loading="isLoading">
    <div>
      <el-select placeholder="客户" v-model="customerId" clearable class="mr-30">
        <el-option v-for="(item , index) in clientList"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      报价日期:
      <el-date-picker v-model="timeArr"
                      type="daterange"
                      range-separator="至"
                      style="width: 400px;"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
      </el-date-picker>
      <div class="fr">
        <el-input style="width: 200px;" class="filter-item" v-model="quoteNo" placeholder="请输入报价单号">
        </el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="search" size="small">查询
        </el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%" class="mt-20">
      <el-table-column label="序号">
        <template slot-scope="scope">
          {{(pageData.page - 1) * pageData.size + (scope.$index+1) }}
        </template>
      </el-table-column>
      <el-table-column prop="customerCode" label="客户代码">
      </el-table-column>
      <el-table-column prop="customerName" label="客户名称">
      </el-table-column>
      <el-table-column prop="customerModel" label="客户型号">
      </el-table-column>
      <el-table-column prop="appraisalNo" label="估计单号">
      </el-table-column>
      <el-table-column prop="quoteTime" label="报价日期">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 0">未处理</div>
          <div v-if="scope.row.status === 1">已处理</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="small" @click="$router.push({path:'estimatePrice/detail',query:{quoteId:scope.row.id}})" type="success">查看</el-button>
            <el-button size="small" type="primary" v-if="scope.row.status !== 1" @click="$router.push({path:'estimatePrice/edit',query:{quoteId:scope.row.id}})">编辑</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="getList()"
                   :current-page.sync="pageData.page"
                   :page-sizes="[2,5,10,20]"
                   :page-size="pageData.size"
                   :total="pageData.total"
                   layout="total, sizes, prev, pager, next, jumper"
                   class="pds-pagination">
    </el-pagination>
  </div>
</template>
<script>
  import * as api from '@/api/sale/priceAdjust/index'
  import {mapGetters} from 'vuex';

  export default {
    components: {
      // 'depart-selector': () =>
      //   import ('./components/departSelector')
    },
    data() {
      return {
        tableData: [],
        pageData: {
          page: 1,
          size: 10,
          total: 1
        },
        quoteNo: '',
        customerId: '',
        isLoading: false,
        clientList: [],
        timeArr: [],
        quoteTime1: '',
        quoteTime2: ''
      }
    },
    created() {
    this.getClientList();
    },
    activated() {
    this.getList();
    },
    computed: {
      ...mapGetters([
        'elements',
        'language'
      ])
    },
    methods: {
      // 获取数据列表
      getList() {
        if (this.isLoading) return;
        this.isLoading = true;
        this.listParams = {
          page: this.pageData.page,
          size: this.pageData.size,
          customerId: this.customerId,
          quoteNo: this.quoteNo,
          quoteTime1: this.quoteTime1,
          quoteTime2: this.quoteTime2
        };
        api.page(this.listParams).then(res => {
          this.tableData = res.data.rows;
          this.pageData.total = res.data.total;
          this.isLoading = false;
        })
      },

      // 获取客户列表
      getClientList() {
        api.getClientList().then(res => {
          this.clientList = res.data;
        })
      },

      // 搜索
      search() {
        if (this.timeArr === null) {
          this.quoteTime1 = this.quoteTime2 = '';
        } else {
          this.quoteTime1 = this.timeArr[0];
          this.quoteTime2 = this.timeArr[1];
        }
        this.pageData.page = 1;
        this.getList('search');
      }
    }
  }
</script>
